body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f7fcb3;
  color: #220a0a;
}

h1,
h2,
h3 {
  color: #2c3e50;
}

p {
  max-width: 600px;
}

img {
  max-width: 100%;
  display: block;
}

.mask1,
.mask2,
.mask3 {
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
  overflow: hidden;
}

/* Máscara con imagen (como un logo) */
.img-mask-img img {
  -webkit-mask-image: url("../imagenes/badbo.jpg");
  mask-image: url("../img/w3logo.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/* Máscara con degradado lineal */
.img-mask-linear img {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

/* Máscara radial circular */
.mask2 img {
  -webkit-mask-image: radial-gradient(
    circle,
    black 50%,
    rgba(0, 0, 0, 0.5) 50%
  );
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

/* Máscara radial elíptica */
.mask3 img {
  -webkit-mask-image: radial-gradient(
    ellipse,
    black 50%,
    rgba(0, 0, 0, 0.5) 50%
  );
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

/* Estilo para SVGs */
svg {
  display: block;
  margin: 20px auto;
  border: 1px solid #ccc;
  background-color: #eee;
}